<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑用户 - 宠物医院管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 p-0">
                <%@ include file="../common/admin-sidebar.jsp" %>
            </div>

            <!-- 主内容区域 -->
            <div class="col-md-10">
                <div class="main-content p-4">
                    <!-- 页面标题 -->
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">编辑用户</h1>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <a href="${pageContext.request.contextPath}/user/list" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left"></i> 返回列表
                            </a>
                        </div>
                    </div>

                    <!-- 错误提示 -->
                    <c:if test="${not empty error}">
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>${error}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    </c:if>

                    <!-- 编辑表单 -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">用户信息</h5>
                        </div>
                        <div class="card-body">
                            <form method="post" action="${pageContext.request.contextPath}/user/update" id="editForm">
                                <input type="hidden" name="userId" value="${user.userId}">
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="username" class="form-label">用户名</label>
                                            <input type="text" class="form-control" id="username" name="username" 
                                                   value="${user.username}" readonly>
                                            <div class="form-text">用户名不可修改</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="realName" class="form-label">真实姓名 <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="realName" name="realName" 
                                                   value="${user.realName}" required maxlength="50" placeholder="输入真实姓名">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="phone" class="form-label">手机号</label>
                                            <input type="tel" class="form-control" id="phone" name="phone" 
                                                   value="${user.phone}" maxlength="11" placeholder="输入手机号">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="email" class="form-label">邮箱</label>
                                            <input type="email" class="form-control" id="email" name="email" 
                                                   value="${user.email}" maxlength="100" placeholder="输入邮箱地址">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="userType" class="form-label">用户类型 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="userType" name="userType" required>
                                                <option value="user" ${user.userType == 'user' ? 'selected' : ''}>普通用户</option>
                                                <option value="admin" ${user.userType == 'admin' ? 'selected' : ''}>管理员</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="status" class="form-label">状态 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="status" name="status" required>
                                                <option value="active" ${user.status == 'active' ? 'selected' : ''}>正常</option>
                                                <option value="inactive" ${user.status == 'inactive' ? 'selected' : ''}>禁用</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="address" class="form-label">地址</label>
                                    <textarea class="form-control" id="address" name="address" rows="3" 
                                              maxlength="200" placeholder="输入详细地址">${user.address}</textarea>
                                </div>

                                <div class="d-flex justify-content-end">
                                    <a href="${pageContext.request.contextPath}/user/list" class="btn btn-secondary me-2">
                                        <i class="fas fa-times"></i> 取消
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> 保存修改
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 表单验证
        document.getElementById('editForm').addEventListener('submit', function(e) {
            const realName = document.getElementById('realName').value.trim();
            const userType = document.getElementById('userType').value;
            const status = document.getElementById('status').value;
            const phone = document.getElementById('phone').value.trim();
            const email = document.getElementById('email').value.trim();

            // 验证必填字段
            if (!realName) {
                alert('请输入真实姓名');
                e.preventDefault();
                return;
            }

            if (!userType) {
                alert('请选择用户类型');
                e.preventDefault();
                return;
            }

            if (!status) {
                alert('请选择状态');
                e.preventDefault();
                return;
            }

            // 验证手机号格式
            if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
                alert('请输入正确的手机号格式');
                e.preventDefault();
                return;
            }

            // 验证邮箱格式
            if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                alert('请输入正确的邮箱格式');
                e.preventDefault();
                return;
            }
        });
    </script>
</body>
</html>
